<template>
    <div id="usertable-outer">
        <div id="usertable-block">
            <div id="usertable">
                <el-table :data="userData.nowUserList" 
                style="width: 100%;"
                @ceil-click="handleCeilClick"
                >
                    <el-table-column prop="id" label="ID" width="50"/>
                    <el-table-column prop="name" label="姓名" width="150" />
                    <el-table-column prop="telphone" label="电话" width="150" />
                    <el-table-column prop="password" label="密码" width="120" />
                    <el-table-column prop="identify" label="身份" width="120" />
                    <el-table-column prop="belong" label="所属教研室"  width="100" />
                    <el-table-column prop="create_at" label="账号创建时间" width="120"/>
                    <el-table-column prop="update_at" label="账号更新时间" width="120"/>
                    
                    <el-table-column label="删除用户" width="100" >
                        <template #default="scope">
                            <el-button @click="deleteUser(scope.row.id)" v-if="scope.row.identify == '超级管理员'" disabled="true"  type="danger">删除</el-button>
                            <el-button @click="deleteUser(scope.row.id)" v-else type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="更改信息" width="100" >    
                        <template #default="scope">
                            <el-button @click="updateUser(scope.row.id)" v-if="scope.row.identify == '超级管理员'" disabled="true" type="info">更改</el-button>
                            <el-button @click="updateUser(scope.row.id)" v-else type="info">更改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div id="pagination-block">
            <el-pagination
                v-model:currentPage="userData.currentPage"
                :page-size=10
                :small="false"
                :disabled="false"
                :background="true"
                layout="prev, pager, next"
                v-model:total="userData.total"
                @current-change="handleCurrentChange"
                ></el-pagination>
                <span />
                <text v-text="paginationBar"></text>
            <el-button type="primary" id="refreash-button" @click="initData()" :icon="Refresh"></el-button>
        </div>
    </div>
    
</template>

<script>
    import axios from "axios"
    import {ElMessage} from "element-plus"
    import {Refresh} from "@element-plus/icons-vue"
    

    export default {
        data() {
            return {
                Refresh: Refresh,
                userData:{
                    total:0,
                    currentPage:1,
                    nowUserList:[],
                },
                
            };
        },
        computed:{
            paginationBar(){
                let that = this
                return "共"+that.userData.total+"条记录 第"+that.userData.currentPage+"/"+(Math.ceil(that.userData.total/10))+"页"
            }
        },
        methods:{
            deleteUser(id){
                axios.post("/user/delete",{"id":id}).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"删除用户成功"
                        })
                        this.initData();
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },
            updateUser(id){
                this.$router.push("/index/adminUserUpdate/"+id)
            },
            async getUserList(page){
                axios.post("/user/queryUsers",{"page":page}).then((response) => {
                if(response.data.code == 0){
                    let data = response.data.data
                    for(let i in data){
                        data[i].create_at = (new Date(data[i].create_at)).toLocaleDateString()
                        data[i].update_at = (new Date(data[i].update_at)).toLocaleDateString()     
                        console.log(data[i].identify)               
                        if(data[i].identify == 2){
                            data[i].identify = "普通用户"
                        }
                        else if(data[i].identify == 1)
                        {
                            data[i].identify = "管理员"
                        }
                        else
                        {
                            data[i].identify = "超级管理员"
                        }
                    }   
                    this.userData.nowUserList = response.data.data
                }
                else
                {
                    ElMessage.error("error-code:"+response.data.code+" error-msg:"+response.data.msg)
                } 
            })
                
            },  
            handleCurrentChange(val){
                this.getUserList(val)
                this.userData.currentPage = val
            },
            initData(){
                let that = this
                that.getUserList(that.userData.currentPage),
                axios.post("/user/queryUserNumber").then((res)=>{
                    if(res.data.code == 0){                    
                        that.userData.total = res.data.data
                    }
                    else
                    {
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg)
                    }
                })
                
            }
        },
        mounted(){
            this.initData();
        }
    }
    
</script>

<style scopted>

#usertable-outer{
    height: 100%;
    width:100%;
}

#usertable{
    width:95%;
    height: 100%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top:5px;
}

#usertable-block{
    height: 90%;
    width:100%;
}


#pagination-block{
    height: 10%;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#refreash-button{
    position:fixed;
    bottom:40px;
    right:20%;
}


</style>

